<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>处方详情</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
<div id="app" style="padding-top: 60px">
    <div class="layui-card">
        <div class="layui-card-body">
            <div style="padding-left: 200px;padding-right: 200px">
                <blockquote class="layui-elem-quote">处方编号：{{recipeMedi.recipeMediId}}</blockquote>
                <blockquote class="layui-elem-quote">患者编号：{{recipeMedi.recipeMediId}}</blockquote>
                <blockquote class="layui-elem-quote">开具日期：￥{{recipeMedi.recipeMediId}}.00</blockquote>
                <blockquote class="layui-elem-quote">总价：{{recipeMedi.recipeMediTotal}}</blockquote>
                <blockquote v-if="payStatus" class="layui-elem-quote">支付状态：已支付</blockquote>
                <blockquote v-if="!payStatus" class="layui-elem-quote">支付状态：未支付</blockquote>
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>药品名称</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>规格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.medicine.mediName}}</td>
                    <td>{{item.amount}}</td>
                    <td>{{item.mediItemSubtotal}}</td>
                    <td>{{item.medicine.mediStand}}</td>
                    <td>
                        <a href="#" @click="todcoAdvice(item.inpatientId)" class="layui-btn">缴费详情</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <br/>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: " #app",
        data: {
            //清单列表
            list: [],
            //处方对象
            recipeMedi: {},
            id: "",
            payStatus:true
        },
        created() {
            //生命周期函数，已初始化就调用加载数据方法
            this.getData();
            this.id = this.getUrlKey("recipeMediId");
        },
        methods: {
            //获取url的指定名字的参数
            getUrlKey: function (name) {
                //构造一个含有目标参数的正则表达式对象
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                //匹配目标参数
                var r = window.location.search.substr(1).match(reg);
                //返回参数
                if (r != null) {
                    return unescape(r[2]);
                } else {
                    return null;
                }
            },
            getData: function () {
                //此处注意：需要“”，不然vue会按照变量来查找
                var recipeMediId = this.getUrlKey("recipeMediId");
                var that = this;
                axios.get("http://localhost:8080/recipeMedi/getRecipeMediById?recipeMediId=" +
                    recipeMediId).then(function (resp) {
                    that.recipeMedi = resp.data.data;
                    that.payStatus = resp.data.data.payStatus;
                    that.list = resp.data.data.mediItemList;
                });
            }
        }
    })
</script>
</body>
</html>